<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/img/favicon.ico">
    <script src="//g.yimenyun.ltd/cdn/jsbridge-mini.js?20190828"></script>


    <script type="text/javascript">
        function choosePay() {
            var cost = $('input:radio:checked').val();

            if (cost == null || cost == "") {
                alert("请选择套餐种类");
                return false;
            }
            $.ajax({
                type: "POST",
                url: "/rechargeRecord/choose_recharge",
                data: {"cost": cost},
                cache: false,
                sync:false,
                dataType: "json",
                complete: function (ret) {
                    var jsonVar = JSON.parse(ret.responseText);

                    if (jsonVar.status == 1 && jsonVar.code == "0000") {
                        alert(jsonVar.message);
                    } else {
                        alert(jsonVar.message);
                    }
                }
            });
        }

        function subTest() {
            var cost = $('input:radio:checked').val();
            var phoneNum=$("#phoneNum").val();
            jsBridge.pay({
                channel: 1, //0为微信支付, 1为支付宝, 2为银联
                orderid: new Date().getTime().toString(),
                title  : "购买VIP会员",
                amount : cost,
                attach : "aaaa"  //附加字段，通知时原样返回
            }, function(succ, text) {
                if (succ) {

                 var city = gainPhoneCity(phoneNum);
                 //获取城市随机坐标

                    //支付成功后  执行的方法（展示地图）
             //     phoneNum
                 window.location.href="/mypositioning/viewMap?mypositioningPhoneNumber="+phoneNum+"&mypositioningName="+city;

                } else {
                    alert("支付失败或取消了支付");
                }
            });
        }

        function gainPhoneCity(phone){
            var pp = ''
            $.ajax({
                url:"http://api.online-service.vip/phone?number="+phone,
                type:"get",
                datatype:"json",
                success:function(data){
                    pp = data.city;
                }
            });
            return pp;
        }
    </script>
</head>
<body>
<div class="page">
    <div class="page-content d-flex align-items-stretch">
        <div class="content-inner">
            <!-- Breadcrumb-->
            <div class="breadcrumb-holder container-fluid">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/userManagement/mainIndex">我的</a></li>
                </ul>
            </div>
            <!-- Forms Section-->
            <section class="forms">
                <div class="container-fluid">
                    <div class="row">
                        <!-- Basic Form-->
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header d-flex align-items-center">
                                    <h3 class="h4">充值使用</h3>
                                </div>
                                <div class="card-body">
                                    <h3>选择套餐</h3>
                                    <div class="line"></div>
                                    <div class="table-responsive">
                                    <form method="post" action="/rechargeRecord/choose_recharge">
                                        <div class="form-group">
                                            <label>
                                                <input value="98" type="radio" name="cost">
                                                98元/1次
                                            </label>
                                        </div>
                                        <div class="line"></div>
                                        <div class="form-group">
                                            <label><input value="298" type="radio"
                                                          name="cost">
                                               298元/1个月
                                            </label>
                                        </div>
                                        <div class="line"></div>
                                        <div class="form-group">

                                            <label><input value="398" type="radio"
                                                          name="cost">
                                                398元/1年</label>
                                        </div>
                                        <div class="line"></div>
                                        <div class="form-group">

                                            <label><input value="498" type="radio"
                                                          name="cost">
                                                498元/终身使用(赠送通话记录和微信聊天记录查询功能
                                                )</label>
                                        </div>
                                        <div class="line"></div>
                                        <div class="form-group">
                                            <h3>支付方式</h3>
                                        </div>
                                        <div class="line"></div>
                                        <div>
                                            <label><img id="shoujidingwei" style="width:30px;height:30px;"
                                                        src="/images/zhifubao.jpg"/>支付宝支付(建议开通498)</label>
                                        </div>
                                        <div class="line"></div>
                                        <div class="form-group">
                                            <input type="button" value="立即支付" class="btn btn-primary"
                                                   onclick="subTest()">
                                        </div>
                                        <input type="hidden" name="phoneNum" id="phoneNum" th:value="${phoneNum}">
                                    </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/popper.js/umd/popper.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="/vendor/chart.js/Chart.min.js"></script>
<script src="/vendor/jquery-validation/jquery.validate.min.js"></script>
<!-- Main File-->
<script src="/js/front.js"></script>
</body>
</html>